<!-- 单位编辑弹窗 -->
<template>
  <ele-modal
    v-model="visible"
    :width="1000"
    destroy-on-close
    :title="`${data?.name} 出入库记录`"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      :loadOnCreated="visible"
      size="small"
    >
      <template #type="{ row }">
        <el-tag :type="row.type === 1 ? 'primary' : 'danger'">{{ row.order_type_name }}</el-tag>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script setup>
const props = defineProps({
  data: Object,
})
const visible = defineModel()
/** 表格实例 */
const tableRef = ref(null)

/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    label: '序',
    width: 44,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'order_type_name',
    label: '单据类型',
    minWidth: 100,
    align: 'center',
    slot: 'type',
  },
  {
    prop: 'order_sn',
    label: '单据编号',
    minWidth: 140,
    align: 'center',
  },
  {
    prop: 'create_time',
    label: '单据时间',
    minWidth: 120,
    align: 'center',
    formatter: (row) => {
      return row.create_time ? utils.formatDate(row.create_time) : '-'
    },
  },
  {
    prop: 'supplier_name',
    label: '货主',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'warehouse_name',
    label: '仓库',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'unit',
    label: '单位',
    minWidth: 80,
    align: 'center',
  },
  {
    prop: 'num',
    label: '数量',
    minWidth: 80,
    align: 'center',
  },
])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/stockOutIn/index', { ...where, ...orders, product_id: props.data.id, page, limit })
}
</script>
